<template>
  <div
    v-show="isShowPage"
    class="report_btn_wapper">
    <div class="report_btn" @click="handleShowCtrlBtn">
      <i class="iconfont iconfanhuizhucaidan"></i>
    </div>
    <div
      class="group"
      v-show="isShowctrlDialog">
      <div
        :style="[{
          color : isShowHandBtn ? '#2aaffe' : '#ddd'
        }]"
        class="group_hand" @click="hdndleHand">
        <i class="iconfont iconzhuanjiao"></i>
        <span>转交</span>
      </div>
      <div
        :style="[{
          color : isShowDelayBtn ? '#2aaffe' : '#ddd'
        }]"
        class="group_delay" @click="hdndleDelay">
        <i class="iconfont iconyanqi"></i>
        <span>延期</span>
      </div>
      <div
        :style="[{
          color : isShowTerminationBtn ? '#2aaffe' : '#ddd'
        }]"
        class="group_termination" @click="hdndleTermination">
        <i class="iconfont iconzhongzhi"></i>
        <span>终止</span>
      </div>
      <div class="group_list" @click="hdndleList">
        <i class="iconfont iconliebiao"></i>
        <span>列表</span>
      </div>
    </div>

    <!-- 终止 -->
    <gzhb-dialog
      :visible.sync="isShowTerminationDialog"
      title="请输入终止原因">
      <gzhb-field
        label-width="17%"
        label="原因：">
        <van-field
          slot="input"
          rows="1"
          autosize
          v-model="terminationDialogForm.zhongzhiyuanyin"
          type="textarea"
          placeholder="请输入" />
      </gzhb-field>

      <!-- 按钮 -->
      <div class="ui-row ui-border__top">
        <div class="ui-col ui-col4 ui-col__offset4">
          <div class="ui-cell">
            <button @click="handleTerminationDialogSure" class="ui-button ui-whole-line">确定</button>
          </div>
        </div>
      </div>
    </gzhb-dialog>

    <!-- 延期 -->
    <gzhb-dialog
      :visible.sync="isShowDelayDialog"
      title="延期申请">
      <gzhb-field
        labelWidth="26%"
        label="任务名称：">
        <van-field
          slot="input"
          readonly
          rows="1"
          type="textarea"
          autosize
          v-model="delayDialogForm.name"
          placeholder='' />
      </gzhb-field>
      <gzhb-field
        label-width="26%"
        label="完成时间："
        readonly
        placeholder="请选择时间"
        v-model="delayDialogForm.finishTime"
        @click="pickTime.show = true">
      </gzhb-field>
      <gzhb-field
        labelWidth="26%"
        label="说明：">
        <van-field
          slot="input"
          rows="1"
          type="textarea"
          autosize
          v-model="delayDialogForm.reason"
          placeholder='' />
      </gzhb-field>

      <!-- 按钮 -->
      <div class="ui-row ui-border__top">
        <div class="ui-col ui-col4 ui-col__offset4">
          <div class="ui-cell">
            <button @click="handleelayDialogSure" class="ui-button ui-whole-line">确定</button>
          </div>
        </div>
      </div>
    </gzhb-dialog>

    <!-- 转交 -->
    <gzhb-dialog
      :visible.sync="isShowHandDialog"
      title="转交">
      <gzhb-field
        labelWidth="26%"
        label="任务名称：">
        <van-field
          slot="input"
          readonly
          rows="1"
          type="textarea"
          autosize
          v-model="handDialogForm.name"
          placeholder='' />
      </gzhb-field>
      <gzhb-field
        label-width="26%"
        label="转交人："
        readonly
        placeholder="请选择接收人"
        v-model="handDialogForm.human"
        @click="handleSelectHuman">
      </gzhb-field>
      <gzhb-field
        labelWidth="26%"
        label="说明：">
        <van-field
          slot="input"
          rows="1"
          type="textarea"
          autosize
          v-model="handDialogForm.reason"
          placeholder='' />
      </gzhb-field>

      <!-- 按钮 -->
      <div class="ui-row ui-border__top">
        <div class="ui-col ui-col4 ui-col__offset4">
          <div class="ui-cell">
            <button @click="handleHandDialogSure" class="ui-button ui-whole-line">确定</button>
          </div>
        </div>
      </div>
    </gzhb-dialog>

    <!-- 时间选择 -->
    <van-popup v-model="pickTime.show" position="bottom">
      <van-datetime-picker
        v-model="pickTime.time"
        type="date"
        @cancel="pickTime.show = false"
        @confirm="pickTimeConfirm"/>
    </van-popup>
  </div>
</template>

<script>
import moment from 'moment'
import axios from '@/axios'
import { utils_getLocal } from "@/utils/index.js"
import { mapGetters } from 'vuex'
export default {
  name: "ReportBtn",
  props:{
    isShowPage:{
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      // 显示终止，转交，延期按钮
      isShowctrlDialog: false,

      // 终止弹框
      isShowTerminationDialog: false,
      terminationDialogForm:{
        zhongzhiyuanyin: ''
      },

      // 延期弹框
      isShowDelayDialog: false,
      delayDialogForm:{
        name: '',
        finishTime: '',
        reason: '',
      },

      // 转交弹框
      isShowHandDialog: false,
      handDialogForm:{
        name:'',
        human: '',
        reason: ''
      },

      isShowTerminationBtn: true,
      isShowDelayBtn: true,
      isShowHandBtn: true,

      pickTime:{
        show: false,
        time: new Date()
      },
      masterTask:{}
    }
  },
  computed: {
    ...mapGetters(['selectedHumanList', 'isShow']),
  },
  watch: {
    isShow:{
      deep: true,
      handler(val){
        this.masterTask = JSON.parse(localStorage.getItem('masterTask'))
        this.delayDialogForm.name = this.masterTask.name || ''
        this.handDialogForm.name = this.masterTask.name || ''
        this.isShowTerminationBtn = this.handleIsShowTerminationBtn()
        this.isShowDelayBtn = this.handleIsShowDelayBtn()
        this.isShowHandBtn = this.handleIsShowHandBtn()
      }
    },
    selectedHumanList:{
      deep: true,
      handler(val){
        this.handDialogForm.human = val.name
      }
    }
  },
  methods: {
    // 显示终止，转交，延期界面
    handleShowCtrlBtn(){
      this.isShowctrlDialog = !this.isShowctrlDialog
    },
    handlectrlSureDialog(){
      this.isShowctrlDialog = false
    },
    // 点击显示-终止按钮
    hdndleTermination(){
      if(!this.isShowTerminationBtn) return
      this.isShowTerminationDialog = true
    },
    // 点击显示-延期按钮
    hdndleDelay(){
      if(!this.isShowDelayBtn) return
      this.isShowDelayDialog = true
    },
    // 点击显示-转交按钮
    hdndleHand(){
      if(!this.isShowHandBtn) return
      this.isShowHandDialog = true
    },
    // 点击显示-转交按钮-人员选择
    handleSelectHuman(){
      this.$store.commit('SET_HUMAN_SEARCH_PAGE', true)
    },
    // 点击列表
    hdndleList(){
      this.$router.push({name: 'taskList'})
    },

    // 终止-点击确定
    handleTerminationDialogSure(){
      let obj = {
        uid : this.masterTask.id,
        zhongzhiyuanyin: this.terminationDialogForm.zhongzhiyuanyin
      }

      // 内容为空，则禁止提交
      if(!this.terminationDialogForm.zhongzhiyuanyin){
        this.$toast('请输入完整信息')
        return
      }

      axios.post('taskTermination', obj).then(res => {
        if(res.succ){
            this.$toast.success(res.msg)
            this.$emit("dataUpdata")
        } else {
          this.$toast(this.handlePoint(res.msg) || '终止失败！')
        }
      })

      this.isShowTerminationDialog = false
    },
    // 延期-点击确定
    handleelayDialogSure(){
      let obj = {
        task : this.masterTask.id,
        description: this.delayDialogForm.reason,
        newFinishDate: this.delayDialogForm.finishTime
      }

      // 内容为空，则禁止提交
      if (!this.delayDialogForm.reason || !this.delayDialogForm.finishTime) {
        this.$toast('请输入完整信息')
        return
      } else if (!this.delayDialogForm.reason) {
        // 延期完成时间
        this.$toast('请输入正确地时间')
        return
      }

      axios.post('saveTaskApplyDelay', obj).then(res => {
        if(res.success){
            this.$toast.success(res.message)
            this.$emit("dataUpdata")
        } else {
          this.$toast(this.handlePoint(res.message) || '延期失败！')
        }
      })

      this.isShowDelayDialog = false
    },
    // 转交-点击确定
    handleHandDialogSure(){
      let masterTask = JSON.parse(localStorage.getItem('masterTask'))
      let obj = {
        description: this.handDialogForm.reason,
        task: masterTask.id,
        recipient: this.selectedHumanList.no,
        recipientName: this.selectedHumanList.name
      }

      // 内容为空，则禁止提交
      if (!this.handDialogForm.reason || !this.selectedHumanList.name) {
        this.$toast('请输入完整信息')
        return
      }

      if(masterTask.principalNo === this.selectedHumanList.no){
        this.$toast('转交人不能是自己')
        return
      }



      axios.post('saveTaskApplyRelay', obj).then(res => {
        if(res){
            this.$toast.success('转交成功')
            this.$emit("dataUpdata")
        } else {
          this.$toast(this.handlePoint(res.message) || '转交失败！')
        }
      })
      this.isShowHandDialog = false
    },

    //格式化时间
    pickTimeConfirm() {
      // 获取节点的父级时间
      axios.get('findTaskById', {
        params: {
          id: utils_getLocal('id')
        }
      }).then(res => {
        let startTime = Number(new Date(res.masterTask.finish.slice(0, 10)))
        let changeTime = Number(new Date(this.pickTime.time))
        if(startTime < changeTime){
          this.$dialog.alert({
            message: '本次申请延期日期已超出父级任务计划完成时间范围，请确认是否发起申请'
          })
          //this.$toast('本次申请延期日期已超出父级任务计划完成时间范围，请确认是否发起申请')
        }
        this.delayDialogForm.finishTime = moment(this.pickTime.time).format('YYYY-MM-DD')
        this.pickTime.show = false
      })
    },

        //终止-按钮显示
    handleIsShowTerminationBtn(){
      // 1、全景计划、重点难点和工作督办任务不允许：转交、终止、延期
      // 2、任务在途状态，只有看详情，不能操作（汇报、终止、延期、转交
      // 3、除以上两点，我验收的任务，验收人可以转交或终止任务
      let typeName = ['全景计划任务','项目重点难点事项','工作预警任务']
      let masterTask =  JSON.parse(localStorage.getItem('masterTask'))
      let ontheWayObj =  JSON.parse(localStorage.getItem('ontheWayObj'))
      let user =  JSON.parse(localStorage.getItem('user'))
      if(
        typeName.includes(masterTask.typeName) ||
        Object.keys(ontheWayObj).length > 0 ||
        masterTask.statLabel === '已终止' ||
        (user.no !== masterTask.assignerNo && user.no !== masterTask.principalNo)
      ) {
        return false
      } else {
        return true
      }
    },
    // 延期-按钮显示
    handleIsShowDelayBtn(){
      let typeName = ['全景计划任务','项目重点难点事项','工作预警任务']
      let masterTask =  JSON.parse(localStorage.getItem('masterTask'))
      let ontheWayObj =  JSON.parse(localStorage.getItem('ontheWayObj'))
      let user =  JSON.parse(localStorage.getItem('user'))
      if(
        typeName.includes(masterTask.typeName) ||
        masterTask.statLabel === '已终止' ||
        Object.keys(ontheWayObj).length > 0 ||
        user.no !== masterTask.principalNo
      ) {
        return false
      } else {
        return true
      }
    },
    // 转交-按钮显示
    handleIsShowHandBtn(){
      let typeName = ['全景计划任务','项目重点难点事项','工作预警任务']
      let masterTask =  JSON.parse(localStorage.getItem('masterTask'))
      let ontheWayObj =  JSON.parse(localStorage.getItem('ontheWayObj'))
      let user =  JSON.parse(localStorage.getItem('user'))
      if(
        typeName.includes(masterTask.typeName) ||
        Object.keys(ontheWayObj).length > 0 ||
        masterTask.statLabel === '已终止' ||
        (user.no !== masterTask.assignerNo && user.no !== masterTask.principalNo)
      ) {
        return false
      } else {
        return true
      }
    },

    //去掉<br>
    handlePoint(msg){
      var reg=/\<br\>/g
      return msg.replace(reg, '')
    }
  }
}
</script>

<style lang="less" scoped>
.report_btn_wapper{

  // 汇报按钮
  .report_btn{
    position: absolute;
    bottom: 1.075rem;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50% 0 0 50%;
    width: 0.415rem;
    height: 0.415rem;
    // background:#f1f1f1 url("/images/reportbtn.png") no-repeat;
    // background-size: 0.2rem 0.2rem;
    // background-position: center;
    background-color: #f1f1f1;
    box-shadow: 0 0 6px 0 #999;
    z-index: 100;
    i{
      color:#2aaffe;
      font-size: 0.18rem;
    }
  }
  .group{
    position: absolute;
    border-radius: 50%;
    bottom: 0.2rem;
    right: -1.125rem;
    width: 2.25rem;
    height: 2.25rem;
    background-color: white;
    box-shadow: 0 0 8px 0 #999;
    z-index: 99;
    .group_hand, .group_delay, .group_termination, .group_list{
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 0.4rem;
      height: 0.5rem;
      color:#2aaffe;
      i{
        font-size: 0.28rem;
      }
      span{
        color: #a1a1a1;
        font-size: 0.12rem;
      }
    }
    .group_hand{
      top: 0.3rem;
      left: 0.7rem;
    }
    .group_delay{
      top: 0.6rem;
      left: 0.2rem;
    }
    .group_termination{
      top: 1.25rem;
      left: 0.2rem;
    }
    .group_list{
      top: 1.6rem;
      left: 0.7rem;
    }
  }

  .btn_group{
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0.1rem;
    button{
      height: 0.3rem;
      line-height: 0.3rem;
    }
  }
}
</style>